<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/header.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a class="mui-icon mui-icon-right-nav mui-pull-right" style="color: white;" id="openMenu">···</a>
			<h1 class="mui-title title-color">个人头像</h1>
		</header>
		
		<div class="mui-content">
			<img src="image/face-default-cat.png" id="my_face"/>
		</div>
		
		<div id="sheet-my-face" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
			  <li class="mui-table-view-cell">
				<a href="#" id="chooseImg">选择照片</a>
			  </li>
			  <li class="mui-table-view-cell">
				<a href="#" id="downloadImg">下载照片</a>
			  </li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
			  <li class="mui-table-view-cell">
				<a href="#sheet-my-face"><b>取消</b></a>
			  </li>
			</ul>
		</div>
		
		
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				// 更新用户头像图片
				refreshFaceImage();
				
				// 添加监听函数
				window.addEventListener("refresh", function() {
					refreshFaceImage();
				});
			    
				// 弹出下边框toggle功能
				var openMenu = document.getElementById("openMenu");
				openMenu.addEventListener("tap", function() {
					mui("#sheet-my-face").popover("toggle");
				});
				
				// 选择图片功能
				var chooseImg = document.getElementById("chooseImg");
				chooseImg.addEventListener("tap", function() {
					mui.openWindow({
						url:"plugin/v3.1.6/myface-uploader.html",
						id:"myface-uploader.html",
						createNew:true
					});
					mui("#sheet-my-face").popover("toggle");
				});
				// 下载图片功能
				var downloadImg = document.getElementById("downloadImg");
				downloadImg.addEventListener("tap", function() {
					var userInfoStr = app.getGlobalUserInfo();
					var userInfo = JSON.parse(userInfoStr);
					plus.nativeUI.showWaiting("下载中");
					var faceImgBig = userInfo.faceImgBig;
					
					if (app.isNotNull(faceImgBig)) {
						var downloadTask = plus.downloader.createDownload(
							app.imgServerUrl + faceImgBig, 
							{},
							function(downloadFile, status) {
								console.log(JSON.stringify(downloadFile));
								plus.nativeUI.closeWaiting();
								mui("#sheet-my-face").popover("toggle");
								if (status == 200) {
									plus.gallery.save(downloadFile.filename, function() {
										app.showToast("下载成功", "success");
									}, function() {
										app.showToast("下载失败", "error");
									})
								} else {
									app.showToast("下载失败", "error");
								}
								
							}
						);
						downloadTask.start();
					}
					
				});
			});
			
			// 刷新用户头像图片
			var refreshFaceImage = function () {
				var userInfoStr = app.getGlobalUserInfo();
				var userInfo = JSON.parse(userInfoStr);
				if (userInfo != null && userInfo != undefined) {
					var faceImgBig = userInfo.faceImgBig;
					
					if (app.isNotNull(faceImgBig)) {
						$("#my_face").attr("src", app.imgServerUrl + faceImgBig);
					}
				}
				var imgWidth = document.body.clientWidth;
				$("#my_face").width(imgWidth);
				$("#my_face").height(imgWidth);
			}
		</script>
	</body>

</html>
